<template>
  <div class="layout">
    <div class="content">
      <div class="content-left">
        <div class="logo">
          颜控
        </div>
        <mu-list @change="handleListChange" :value="activeList">
          <mu-list-item to="/" title="仪表盘" value="仪表盘">
            <mu-icon slot="left" value="search" />
          </mu-list-item>
          <mu-list-item to="/check" title="审核" value="审核">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item to="/userslist" title="用户管理" value="用户管理">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item title="图片管理" value="图片管理">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item to="/sort" title="分组管理" value="分组管理">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item to="/rank" title="等级管理" value="等级管理">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item to="/setting" title="综合设置" value="综合设置">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item to="/adduser" title="添加用户" value="添加用户">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
          <mu-list-item to="/addPictures" title="添加图片" value="添加图片">
            <mu-icon slot="left" value="drafts"/>
          </mu-list-item>
        </mu-list>
      </div>
      <div class="content-right">
        <div class="header">
          <div class="headerTitle">{{headerTitle}}</div>
        </div>
        <div class="body">
          <router-view></router-view>
        </div>
        <div class="footer">
          Muse-UI ©2017 Created by Muse-UI
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeTab: 'tab1',
      activeList: '仪表盘',
      headerTitle: '仪表盘'
    }
  },
  methods: {
    handleTabChange (val) {
      this.activeTab = val
    },
    handleListChange (val) {
      this.activeList = val
      this.headerTitle = val
    }
  }
}
window.onresize = function(){
  var clientWidth = document.documentElement.clientWidth;
  var contentLeft = document.getElementsByClassName('content-left')[0]
  var contentRight = document.getElementsByClassName('content-right')[0]
  if(clientWidth < 900){
    contentLeft.style.display = 'none'
    contentRight.style.width = '100%'
  }else{
    contentLeft.style.display = 'block'
    contentRight.style.width = '82%'
  }
}
</script>
<style scoped lang="css">
.layout{
}

.logo{
  font-size: 35px;
  font-weight: 700;
  color: #3F51B5;
  text-align: center;
  padding: 10px 20px;
}

.tab{
  margin: 0 auto;
  width: 400px;
}

.content{
  overflow: hidden;
}

.content-left{
  width: 18%;
  min-width: 167px;
  float: left;
  background-color: rgb(225, 225, 225);
  margin-bottom: -4000px;
  padding-bottom: 4000px;
}

.content-right{
  width: 82%;
  display: inline-block;
  float: right;
  background-color: rgb(236, 236, 236);
}

.header{
  background-color: white;
  height: 73px;
}
.headerTitle{
  display: inline-block;
  font-size: 34px;
  font-weight: 500;
  color: #4A4A4A;
  padding:13px 0 15px 25px;
}

.body{
  min-height: 500px;
  background-color: white;
  margin: 10px 20px;
}

.footer{
  padding: 10px 0;
  text-align: center;
}
.selected{
  background-color: #311B92; 
}
</style>